<template>
  <van-popup v-model:show="isShow" position="bottom" :style="{ height: `calc(100% - ${immersed}pt)` }">
    <div id="content-box">
      <div class="close-icon-box">
        <van-icon class="close-icon" name="cross" size="20" @click.stop="closeHandle" />
      </div>
      <div ref="iframeBoxRef" class="iframe-box" v-if="isShow"></div>
    </div>
  </van-popup>
</template>

<script>
import { reactive, ref, toRefs, watch } from 'vue'
export default {
  setup() {
    const iframeBoxRef = ref(null)

    const state = reactive({
      isShow: false,

      iframeUrl: null,

      immersed: 80,
    })

    watch(() => iframeBoxRef.value, (newVal, oldVal) => {
      if (newVal) {
        createIframe(state.iframeUrl)
      }
    })

    function dialogShow(url) {
      if (!url) return
      state.iframeUrl = url
      state.isShow = true
    }

    function createIframe(url) {
      let iframe = document.createElement("iframe");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("width", "100%");
      iframe.setAttribute("height", '100%');
      iframe.setAttribute("src", url);

      iframeBoxRef.value.appendChild(iframe);
    }

    function closeHandle() {
      state.isShow = false
    }

    return {
      ...toRefs(state),
      iframeBoxRef,
      dialogShow,
      closeHandle,
    }
  }
}
</script>

<style lang="scss" scoped>
#content-box {
  position: relative;
  height: 100%;
  .close-icon-box {
    width: fit-content;
    right: 10px;
    top: 10px;
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    background-color: rgba($color: #000000, $alpha: 0.4);
    border-radius: 50%;
    z-index: 99;
    transition: all 0.2s;
    &:active {
      background-color: rgba($color: #000000, $alpha: 0.6);
    }
    .close-icon {
      color: #ffffff;
    }
  }
  .iframe-box {
    height: 100%;
  }
}
</style>